import { onMounted, onUnmounted, reactive, toRefs } from 'vue'
function useMousePosition() {
  const positions = reactive({
    x: 0,
    y: 0,
    updateMouse: (e: MouseEvent) => {
      positions.x = e.pageX
      positions.y = e.pageY
    }
  })
  const refPositions = toRefs(positions)
  /*   const x = ref(0)
  const y = ref(0)
  const updateMouse = (e: MouseEvent) => {
    x.value = e.pageX
    y.value = e.pageY
  } */
  onMounted(() => {
    document.addEventListener('click', positions.updateMouse)
  })
  onUnmounted(() => {
    document.removeEventListener('click', positions.updateMouse)
  })
  return {
    ...refPositions
  }
}
export default useMousePosition
